<template>
    <div class="myinfo-view">
        <mt-header fixed title="个人资料" class="mt-header">
            <router-link to="/user" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="avatar" >
            <p>头像</p>
            <figure>
                <img v-if="myinfo.pic" :src="myinfo.pic" alt="">
                <img v-else src="@/assets/img/avatar.png" alt="">
            </figure>
        </div>
        <my-cell title="用户名" :value="myinfo.name"></my-cell>
        <my-cell title="手机" :value="myinfo.mobile"></my-cell>
        <my-cell title="邮箱" :value="myinfo.email || '绑定 ＞'" @click.native="bindemail"></my-cell>
        <div class="spacing"></div>
        <my-cell title="修改密码" value="＞"></my-cell>
        <my-footer></my-footer>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    
    export default {
        name: 'MyInfoView',
        data() {
            return {
                
            }
        },
        computed: {
            ...mapState({
                isLogin: state => state.user.isLogin,
                myinfo: state => state.user.myinfo
            })
        },
        methods: {
            bindemail() {
                if(this.myinfo.isLogin && this.myinfo.mobile && !this.myinfo.email) {
                    console.log("跳到绑定邮箱界面")
                }
            }
            
        },
        created(){

        }
    }
</script>

<style scoped>
    .myinfo-view{
        padding: 40px 15px 0 15px;
        text-align: left;
    }
    .mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
    .spacing {
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }

    .avatar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
    }
    .avatar p {
        font-size: 14px;
        color: #666;
    }
    .avatar figure {
        margin: 0;
        height: 60px;
        width: 60px;
        margin: 10px 0;
        border: 1px solid #7F7B26;
        border-radius: 50%;
        overflow: hidden;

        display: flex;
        align-items: center;
    }
    .avatar img {
        height: 60px;
    }
</style>